<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    {{message}}
    <cpn></cpn>
    <hr>
    <cpn>
        <template slot-scope="slot1">
            <!--<span v-for="item in slot1.data1">{{item}} - </span>-->
            <span>{{slot1.data1.join(" - ")}}</span>
        </template>
    </cpn>
</div>

<template id="cpn">
    <div>
        <slot :data1="movies">
            <ul>
                <li v-for="item in movies">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="../../js/vue.js"></script>

<script>
    const vue = new Vue({
        el: "#app",
        data: {
            message: "Hello vue,你好！"
        },
        components: {
            cpn: {
                template: '#cpn',
                data(){
                    return {
                        movies: ["dsfg", "frsg", "yjytun"],
                        name: 'zhangsan'
                    }
                }
            }
        }
    });
</script>
</body>
</html>